<template>
    <div>
        <nav-popup title="Module"></nav-popup>
        <van-popup v-model="popoverVisible" round position="bottom" :style="{ height: '60%' }" @closed="handleCancel">
            <van-form @submit="handleSubmit">
                <div class="titleModule">{{ dialogTitle }}</div>
                <van-field v-model="formModel.modulePosition" name="modulePosition" required label="模组位置"
                    placeholder="请输入模组位置" :rules="[{ required: true, message: '请输入模组位置' }]" />
                <van-field v-model="formModel.moduleSN" label="系列号" required name="moduleSN" placeholder="请输入序列号"
                    :rules="[{ required: true, message: '请输入序列号' }]" />
                <van-field v-model="formModel.mainteDate" name="mainteDate" label="保养时间" placeholder="请选择保养时间" readonly
                    @click="showDatePicker = true" required :rules="[{ required: true, message: '请选择保养时间' }]" />
                <van-field v-model="formModel.mainteEmpNo" name="mainteEmpNo" required label="保养员工"
                    placeholder="请输入保养员工" :rules="[{ required: true, message: '请输入保养员工' }]" />
                <van-field v-model="formModel.mainteEmpName" label="保养员工姓名" placeholder="请输入保养员工姓名" />
                <van-field v-model="formModel.mainteMark" label="备注信息" placeholder="请输入备注信息" />
                <van-button round block type="primary" @click="handleSubmit">提交</van-button>
            </van-form>
        </van-popup>
        <!-- 保养日期弹框 -->
        <van-popup v-model="showDatePicker" round position="bottom" :style="{ height: '30%' }">
            <van-datetime-picker v-model="tempDate" type="date" title="选择日期" v-show="showDatePicker"
                @confirm="confirmDate" @cancel="showDatePicker = false" />
        </van-popup>

        <!-- 底部导航 -->
        <van-tabbar fixed v-model="formModel.mainteType">
            <van-tabbar-item icon="calendar-o" name="week">周保养</van-tabbar-item>
            <van-tabbar-item icon="calendar-o" name="month">月保养</van-tabbar-item>
            <van-tabbar-item icon="calendar-o" name="quater">季保养</van-tabbar-item>
            <van-tabbar-item icon="calendar-o" name="year">年保养</van-tabbar-item>
        </van-tabbar>
        <div>
            <div v-for="line in lineModuleData" :key="`${line.line}-${line.machine}`" class="line-container">
                <div class="line-info">
                    <h3 style="margin-right: 5px">{{ line.line }} - {{ line.machine }}</h3>
                </div>
                <!-- 机器模块显示 -->
                <div v-for="item in line.modules" :key="item.moduleSN" class="module-item">
                    <img :src="getImageSrc(item.moduleType)" :alt="`Module ${item.moduleNo} - ${item.moduleSN}`"
                        class="module-image" @click="e => handleImageClick(line.line, line.machine, item, e)" :class="{
                            'disabled-hover': hoverDisabled !== null && hoverDisabled !== item.moduleNo,
                            'module-clicked': activeMachine === `${line.line}-${line.machine}-${item.moduleNo}`
                        }" />
                    <div
                        :class="['status-circle', item.mainteTypeStatus[formModel.mainteType].mainteComplete ? 'completed' : 'pending']">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import dayjs from "dayjs";
import NavPopup from './NavPopup.vue'
import { getModuleInfoStruct, AddMaintainRecord } from '@/network/moduleMaintain'
export default {
    name: '',
    props: {},
    components: {
        NavPopup,
    },
    data() {
        return {
            showDatePicker: false,
            tempDate: new Date(),
            hoverDisabled: null,
            activeMachine: null, // 当前激活的机器
            activeModuleItem: null, // 当前激活的机器
            popoverVisible: false,
            showPopup: false,
            machineTitle: '',
            formModel: {
                mainteDate: "",
                mainteEmpNo: "",
                mainteEmpName: "",
                mainteMark: "",
                mainteType: "week",
                moduleSN: ''
            },
            lineModuleData: []
        }
    },
    mounted() {
        this.getLineModuleData()
    },
    computed: {
        dialogTitle() {
            return this.machineTitle ? `新增保养 ${this.machineTitle}` : "新增保养";
        }
    },
    methods: {
        async getLineModuleData() {
            try {
                let page = 1;
                let limit = 50;
                let count = 0;
                do {
                    const res = await getModuleInfoStruct({ page, limit })
                    this.lineModuleData.push(...res.data);
                    console.log(res);

                    count = res.count;
                } while (page * limit < count);

            } catch (error) {
                console.log(error);
            }
        },
        getImageSrc(moduleType) {
            if (moduleType === "M3") {
                return require("@/assets/M3 M6/M3.png");
            } else if (moduleType === "M6") {
                return require("@/assets/M3 M6/M6.png");
            }
            return "";
        },
        handleImageClick(line, machine, moduleItem, e) {
            this.formModel = {
                mainteDate: "",
                mainteEmpNo: "",
                mainteEmpName: "",
                mainteMark: "",
                mainteType: "week",
                moduleSN: ''
            }
            const moduleNo = moduleItem.moduleNo;
            const moduleSN = moduleItem.moduleSN
            const key = `${line}-${machine}-${moduleNo}`;
            this.machineTitle = `${line}-${machine}-${moduleSN}`
            if (this.activeMachine && this.activeMachine !== key) {
                return;
            }
            this.popoverVisible = !this.popoverVisible;
            if (this.popoverVisible) {
                this.activeMachine = key;
                this.activeModuleItem = moduleItem;
                this.hoverDisabled = moduleNo;
                // this.formModel.moduleSN = moduleSN;
            }
            else {
                this.activeMachine = null;
                this.activeModuleItem = null;
                this.hoverDisabled = null;
            }
        },
        handleCancel(line, machine, moduleNo) {
            //   const key = `${line}-${machine}-${moduleNo}`;
            //   this.$set(this.popoverVisible, key, false);
            this.popoverVisible = false;

            this.activeMachine = null; // 取消时重置激活的机器
            this.activeModuleItem = null; // 取消时重置激活的机器
            this.hoverDisabled = null;
        },
        async handleSubmit() {
            try {
                const res = await AddMaintainRecord(this.formModel)
                if (!res.data) {
                    return;
                }
                Toast.success('新增成功');
                this.activeModuleItem.mainteTypeStatus[this.formModel.mainteType].mainteComplete = true;
                this.handleCancel()
            }
            catch (err) {
                console.log(err);
            }
        },
        confirmDate(date) {
            this.formModel.mainteDate = dayjs(date).format("YYYY-MM-DD");
            this.showDatePicker = false;
        },
    }
}
</script>
<style scoped>
.van-tabbar {
    background-color: #fff;
    border-top: 1px solid #ebedf0;
}

.line-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 10px;
    align-items: center;
    width: 100%;
    margin-left: 10px;
}

/* .line-info {
    margin-right: 5px;
} */

.module-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.module-image {
    height: 100px;
    margin: 0;
    transition: all 0.3s;
    user-select: none;
}

.module-image:hover,
.module-image.module-clicked {
    opacity: 0.7;
    cursor: pointer;
    transform: scale(1.11);
}

.module-image.disabled-hover {
    pointer-events: none;
    opacity: 1;
}

.status-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-top: 8px;
}

.status-circle.completed {
    background-color: rgb(51, 181, 51);
}

.status-circle.pending {
    background-color: rgb(201, 40, 40);
}

.maintenanceCycle {
    position: fixed;
    top: 20;
    /* z-index: 1; */
}

.title {
    font-size: 24px;
    margin: 20px;
    margin-left: 100px;
    margin-bottom: 8px;
    /* font-weight: bold; */
    /* font-family: 思源宋体 SemiBold; */
}

.line {
    background: linear-gradient(to left, #ffffff, #637ca0, #ffffff);
    height: 3px;
    margin-bottom: 12px;
}

.titleModule {
    margin: 18px;
    font-size: 20px;
    color: black;
}
</style>